<template>
    <div>
        <van-nav-bar
                title="添加银行卡"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-cell-group>
            <van-field
                    v-model="bankname"
                    label="持卡人姓名"
                    placeholder="请输入持卡人姓名"
                    required
                    :error-message="errorMessageName"
            />
            <van-field
                    v-model="cardId"
                    label="卡号"
                    placeholder="请输入卡号"
                    required
                    type="number"
                    :error-message="errorMessageCardId"
            />
            <van-field
                    v-model="bankaddress"
                    label="开户行"
                    placeholder="请输入开户行"
                    required
                    :error-message="errorMessageAddress"
            />
            <van-field
                    v-model="bankphone"
                    label="银行预留手机"
                    placeholder="请输入银行预留手机"
                    required
                    type="number"
                    :error-message="errorMessagePhone"
            />

            <van-button
                    type="danger"
                    size="large"
                    style="margin-top: 10px"
                    @click="savebank"
                    :disabled="show ? true : false"
            >
                提交
            </van-button>
        </van-cell-group>
    </div>

</template>

<script>
    import {addbank} from '@/api/api';
    import {Toast} from 'vant';

    export default {
        name: "UserBackCard",
        data() {
            return {
                bankname: '',
                cardId: '',
                bankaddress: '',
                bankphone: '',
                //提交按钮状态
                show: false,
                //错误提示内容
                errorMessagePhone: "",
                errorMessageName: "",
                errorMessageCardId: "",
                errorMessageAddress: "",
                //输入框状态
                checkbankname: false,
                checkcardId: false,
                checkbankbankaddress: false,
                checkbankbankphone: false
            }
        },
        watch: {
            bankname(n) {
                let nameReg = /^[\u4e00-\u9fa5]{2,4}$/
                if (n == '') {
                    this.errorMessageName = "必填项"
                    this.checkbankname = false
                } else if (!nameReg.test(n)) {
                    this.errorMessageName = "姓名有误，请重填"
                    this.checkbankname = false
                } else {
                    this.errorMessageName = ""
                    this.checkbankname = true
                }
            },
            bankphone(n) {
                let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
                if (n == '') {
                    this.errorMessagePhone = "必填项"
                    this.checkbankbankphone = false
                } else if (!phoneReg.test(n)) {
                    this.errorMessagePhone = "手机号码有误，请重填"
                    this.checkbankbankphone = false
                } else {
                    this.errorMessagePhone = ""
                    this.checkbankbankphone = true
                }
            },
            cardId(n) {
                let cardIdReg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/
                if (n == '') {
                    this.errorMessageCardId = "必填项"
                    this.checkcardId = false
                } else if (!cardIdReg.test(n)) {
                    this.errorMessageCardId = "卡号有误，请重填"
                    this.checkcardId = false
                } else {
                    this.errorMessageCardId = ""
                    this.checkcardId = true
                }
            },
            bankaddress(n) {
                if (n == '') {
                    this.errorMessageAddress = "必填项"
                    this.checkbankbankaddress = false
                } else {
                    this.errorMessageAddress = ""
                    this.checkbankbankaddress = true
                }
            }
        },
        methods: {
            savebank() {
                // console.log(this.checkbankname, 'checkbankname')
                // console.log(this.checkbankbankphone, 'checkbankbankphone')
                // console.log(this.checkbankbankaddress, 'checkbankbankaddress')
                // console.log(this.checkcardId, 'checkcardId')
                if (this.checkbankname && this.checkbankbankphone && this.checkbankbankaddress && this.checkcardId) {
                    addbank({
                        name: this.bankname,
                        bankNo: this.cardId,
                        bankDeposit: this.bankaddress,
                        moblie: this.bankphone
                    })
                        .then(res => {
                            return this.$dialog.alert({
                                message: "添加成功", //改变弹出框的内容
                            })
                                .then(() => { //点击确认按钮后的调用
                                    this.$router.push({name: 'user-banklist'})
                                })
                        })
                } else {
                    Toast('请检查输入框内容');
                }
            },
            onClickLeft() {
                // history.go(-1)
                this.$router.push({name: 'user'})
            },

        }
    }
</script>

<style scoped>

</style>